<template>
  <view class="view">
    <div class="item">
      <img v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" class="avatar"></img>
      <button v-else open-type="chooseAvatar" @chooseavatar="chooseavatar">点击获取头像</button>
    </div>
    <div class="item">
      <input
          name="nickName"
          type="nickname"
          placeholder="请输入昵称"
          @change="setName"
          v-model="userInfo.nickName"
      />
    </div>
    <div class="item">
      <button @click="myLogin()">登录</button>
    </div>
  </view>
</template>

<script>
import {
  mapMutations,
} from 'vuex'
export default {
  name: "loginForm",
  data() {
    return {
      userInfo: {
        avatarUrl:"",
        nickName:""
      },
    }
  },
  created() {

  },
  mounted() {
  },
  computed: {},
  methods: {
    ...mapMutations(['login']),

    /**
     * 获取头像
     * @param e
     */
    chooseavatar(e) {
      this.userInfo.avatarUrl = e.detail.avatarUrl
    },

    /**
     * 设置姓名
     * @param name
     */
    setName(e){
      this.userInfo.nickName = e.target.value
    },

    /**
     * 认证登录
     */
    myLogin(){
      this.login({
        ...this.userInfo,
        fun:()=>{
          uni.navigateTo({
            url: '/pages/home/index'
          })
        }
      })
    },
  }
}
</script>

<style lang="scss">
.view{
  text-align: center;
  width: 100%;
}


.item{
  width: 100%;
  margin-top: 20px;
}

.btn {
  background-color: #1aad19;
  color: white;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 20px auto;


}

.nickname {
  font-size: 18px;
  color: #333;
  margin-top: 10px;
}
</style>
